<template>
    <el-button
        :class="btn.class"
        class="aa-table-render-buttons-item"
        :type="btn.type"
        :disabled="btn.disabled && btn.disabled(row, field)"
        v-bind="btn.attr"
    >
        <template v-if="btn.iconRight">
            <span v-if="btn.text" style="padding-right: 6px">{{ btn.text }}</span>
            <Icon v-if="btn.icon" :name="btn.icon" />
        </template>
        <template v-else>
            <Icon v-if="btn.icon" :name="btn.icon" />
            <span v-if="btn.text" style="padding-left: 6px">{{ btn.text }}</span>
        </template>
    </el-button>
</template>
<script setup lang="ts">
interface Props {
    btn: OptButton
    row: TableRow
    field: TableColumn
}

defineProps<Props>()
</script>
<style lang="scss" scoped>
.aa-table-render-buttons-item {
    padding: 4px 5px;
    height: auto;
    .icon {
        font-size: 14px !important;
        color: #fff !important;
    }
}
</style>
